<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Tabs } from "./data.js";
import Card from "@/components/Card.vue";
import { useCourseStore } from "@/store/course";
import { storeToRefs } from "pinia";
import { ElMessage, ElMessageBox } from "element-plus";
import { validateMobile, validateName } from "@/utils/validate";
import { coursesDict } from "@/utils/dicts";
import { getDictName, getUserInfo } from "@/utils";
import { courseInfoApi, courseApplyApi } from "@/api/courses";
const router = useRouter();
const route = useRoute();
const courseStore = useCourseStore();
const id = computed(() => route.query.id, { immediate: true });
const dialogFormVisible = ref(false);
const formRef = ref();
const form = reactive({
  stu_name: "",
  phone_number: "",
});
const rules = {
  stu_name: [{ validator: validateName, trigger: "blur" }],
  phone_number: [{ validator: validateMobile, trigger: "blur" }],
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate();
  const params = {
    ...form,
    course_id: id.value,
    course_name: courseInfo.course_name,
    user_id: getUserInfo().user_id,
  };
  const res = await courseApplyApi(params);
  if (res.data.status === 200) {
    ElMessage({
      message: "报名成功",
      type: "success",
    });
    dialogFormVisible.value = false;
  } else {
    ElMessage({
      message: "报名失败，请重试",
      type: "error",
    });
  }
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogFormVisible.value = false;
};
const jumpToPage = (categoryId) => {
  courseStore.setCourseId(categoryId);
  router.push({ path: "/courses", query: { id: categoryId } });
};
const courseInfo = reactive({});
const getCourseInfo = async (id) => {
  const res = await courseInfoApi(id);
  if (res.data.status === 200)
    Object.keys(res.data.data).map(
      (key) => (courseInfo[key] = res.data.data[key])
    );
  else
    ElMessage({
      message: res.data.message,
      type: "error",
    });
};
onMounted(async () => {
  getCourseInfo(id.value);
});
const baseImgUrl = "/src/assets/img/course-bg.jpg";
const handleError = (event) => {
  event.target.src = baseImgUrl; // 指定备用图片的路径
};
</script>
<template>
  <div class="page-container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><RouterLink to="/">首页</RouterLink></li>
        <li class="breadcrumb-item">
          <a
            class="router-link-active"
            href="#"
            @click="jumpToPage(courseInfo.course_type)"
            >{{ getDictName(courseInfo.course_type, coursesDict) }}</a
          >
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          {{ courseInfo.course_name }}
        </li>
      </ol>
    </nav>
    <div class="row mb-4 bg-white shadow-sm rounded info-card">
      <div class="col-6 pl-0">
        <img
          class="card-img-top"
          :src="courseInfo.course_img"
          :alt="courseInfo.course_name"
          @error="handleError"
        />
      </div>

      <div class="col-6 card border-0">
        <div class="d-flex align-items-center">
          <div class="card-body">
            <h3 class="card-title">{{ courseInfo.course_name }}</h3>
            <ul class="list-unstyled mt-3 mb-4">
              <li>
                <span class="text-black-50">上课时间：</span
                >{{ courseInfo.start_time }} - {{ courseInfo.end_time }}
              </li>
              <li>
                <span class="text-black-50">上课地点：</span>
                {{ courseInfo.course_address }}
              </li>
              <li>
                <span class="text-black-50">费用：</span>
                <span class="text-danger">{{
                  courseInfo.fee === "0.00"
                    ? "免费"
                    : "￥" + courseInfo.fee + "元"
                }}</span>
              </li>
            </ul>
            <button
              type="button"
              class="btn btn-primary btn-round"
              v-if="courseInfo.course_status === '正在报名'"
              @click="dialogFormVisible = true"
            >
              立即报名
            </button>
            <button type="button" class="btn btn-gray btn-round" v-else>
              已结束
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="row ml-0 mr-0 mb-4">
      <div class="col">
        <div class="bg-white shadow-sm rounded p-3 text-center">
          <h5>详细描述</h5>
          <p>
            {{ courseInfo.course_intro }}
          </p>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="报名">
      <el-form :model="form" label-width="80px" ref="formRef" :rules="rules">
        <el-form-item label="姓名" prop="stu_name">
          <el-input v-model="form.stu_name" />
        </el-form-item>
        <el-form-item label="电话" prop="phone_number">
          <el-input v-model="form.phone_number" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(formRef)">
            确定
          </el-button>
          <el-button @click="resetForm(formRef)">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.breadcrumb {
  background-color: transparent;
  margin-top: 1rem;
  margin-bottom: 0;
}
.breadcrumb-item {
  a {
    font-weight: 600;
    color: #502c6c;
  }
}
.list-unstyled {
  li {
    display: flex;
  }
  .text-black-50 {
    width: 80px;
  }
  .text-danger {
    font-weight: 600;
  }
}
.info-card {
  margin-left: 15px;
  margin-right: 15px;
}
</style>
